/**
 *	zhx-tab-frame css with SCSS ver 1.0
 *	Author: Vicco Wang 	Date: 2016.5.20;	
 */
/**
 * 基础色调
 * @type {[type]}
 */
$frame-base-color : #403f3d;
/**
 * 基础字体颜色
 * @type {[type]}
 */
$frame-font-color : #212121;
/**
 * 基础 轻 字体色
 * @type {[type]}
 */
$frame-light-font-color : #E0E0E0;

@mixin frame-transition($wt : all, $sec : .3s) {
	-webkit-transition: $wt $sec ease 0s;
	-moz-transition: $wt $sec ease 0s;
	transition: $wt $sec ease 0s;
}
@mixin no-select{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
@mixin use-flex{
  	display: box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
@mixin flex-align-center{
	-webkit-align-items: center;
	-webkit-justify-content: center;
	align-items: center;
	justify-content: center;
}
@mixin flex-column{
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

html,body{
	font-family: 'Pingfang SC', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	padding:0;margin:0;
	width:100%;
	height:100%;
	font-size:14px;
	font-weight: normal;
	overflow: hidden;
}

ul,li,img{margin:0;padding:0;list-style: none;}

#zhx-frame-wrapper{
	position:relative;
	height:100%;
	left:0;
	@include use-flex;
	@include flex-column;
	@include frame-transition;
}
header{
	/* border-bottom:1px solid #cbcbcb; */
	flex: none;
	-ms-flex: none;
	overflow:hidden;
	color:#fff;
	background-color:$frame-base-color;
	@include use-flex;
	@include no-select;

	div#logo{
		/* width:200px; */
		font-weight:400;
		font-size:1.2em;
		@include use-flex;
		overflow:hidden;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid darken($frame-base-color, 40%);
		box-shadow:-5px 0 25px darken($frame-base-color, 10%) inset;
	}

	div#header-control{
		width:45px;
		font-size:20px;
		text-align: center;
		color:lighten($frame-base-color, 40%);
		@include use-flex;
		@include flex-align-center;
	}

	div#header-nav-bar{
		flex:1;
		-ms-flex: 1;
		@include use-flex;
		align-items: stretch;

		ul{
			@include use-flex;

			li{
				padding:0 20px;
				@include use-flex;
				@include flex-align-center;
				color: $frame-light-font-color;
				position:relative;
				border-left:1px solid lighten($frame-base-color, 10%);
				border-right:1px solid darken($frame-base-color, 40%);
				cursor:pointer;
			}
			li:first-child{
				border-left:none;
			}
			li:last-child{
				border-right:none;
			}
			li:hover{
				color:#fff;
				background-color:lighten($frame-base-color, 2%);
			}
			li:active{
				box-shadow:0 0 15px darken($frame-base-color, 20%) inset;
			}
			li.isActiveTab::after{
				content:" ";
				position:absolute;
				top:-7px;left:50%;
				margin-left:-5px;
				width:10px;height:10px;
				background:lighten($frame-base-color, 50%);
				border-radius: 3px;
				box-shadow:5px 0 10px darken($frame-base-color, 60%);
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
		}

	}
}


#zhx-tabset-wrap{
	flex:1;
	-ms-flex:1;
	@include use-flex;
	overflow: hidden;
}
#nav-wrapper{
	position:relative;
	@include use-flex;
	flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	@include frame-transition(left);
}
#zhx-tabset-navigation{
	background:lighten($frame-base-color, 2%);
	flex: none;
	-ms-flex:none;
	color:#fff;
	border-top:1px solid lighten($frame-base-color, 10%);
	box-shadow:-5px 0 25px darken($frame-base-color, 10%) inset;
	overflow:hidden;
	@include no-select;

	ul{
		flex:none;
		-ms-flex:none;
		padding-top:10px;
		height:100%;

		div.tab-slide-menu{
			@include use-flex;
			@include flex-column;

			div{
				padding:15px 0 15px 15px;
				color:$frame-light-font-color;
				@include use-flex;

				span {
					font-size:20px;
					margin-right:10px;
					@include use-flex;
					@include flex-align-center;
					@include frame-transition();
				}

				span.iconRotated{
					-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
				}

			}

			div.isChildActive{
				background-color:darken($frame-base-color , 3%);
			}
		}

	}
	ul.isChild{
		padding-top:0;
		font-size:.9em;
		overflow:hidden;
		box-shadow:0 5px 10px darken($frame-base-color , 9%) inset;
		@include frame-transition();
	}

	ul.activeChild{
		display:block;
		background-color: darken($frame-base-color , 2%);
	}

	li{
		padding:15px 0 15px 15px;
		color:darken($frame-light-font-color, 10%);
		@include use-flex;
		@include frame-transition(background, .2s);
		/* text-align: center; */
		/* border-bottom:1px solid #354a5f; */
		span {
			font-size:20px;
			margin-right:10px;
			@include use-flex;
			@include flex-align-center;
		}

	}

	li.isChild{
		padding:15px 0 15px 25px;
	}

	li:hover{
		color:#fff;
	}
	li.active{
		color:#fff !important;
		background-color:lighten($frame-base-color , 8%);
	}
	li.childActive{
		color:#fff !important;
		background-color:darken($frame-base-color , 7%)
	}

}

#zhx-tabset-content{
	flex:1;
	-ms-flex:1;
	@include use-flex;
	@include flex-column;
	overflow:hidden;
	background-color:lighten($frame-base-color, 70%);
}


#zhx-tabset-content-tabs{
	height:30px;min-height: 30px;
	user-select:none;
	overflow: hidden;
	position:relative;
	box-shadow: 10px -5px 10px lighten($frame-base-color , 59%) inset;

	ul{
		position: relative;
		overflow:hidden;
		@include use-flex;
		flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		padding:0;margin:0;
		@include frame-transition(left);

		li{
			@include use-flex;
			border-left:1px solid lighten($frame-base-color , 59%);
			border-right:1px solid lighten($frame-base-color , 42%);
			flex:none;
			-ms-flex:none;
			font-size:12px;
			padding:7px 5px 7px 15px;
			box-shadow: 0 -10px 15px lighten($frame-base-color , 49%) inset;
			box-sizing: border-box;
			background-color:lighten($frame-base-color , 59%);
			@include no-select;
			@include frame-transition(background, .2s);

			span{
				width:14px; height:14px;
				font-size:12px;
				color:#616161;
				position:relative;top:2px;
				@include use-flex
				@include flex-align-center;
				margin:0 0 0 15px;
				border-radius:20px;
			}
			span:hover{
				color:#fff;
				background-color:#ea9190;
				text-shadow: 1px 1px 1px #b85752;
				box-shadow:1px 1px 1px #cd645f inset;
			}

		}

		li:hover{
			background-color:#e3e1e1;
		}

		li.smallActive{
			border-left:1px solid #fff !important;
			background-color:#f3f3f3 !important;
			box-shadow:none !important;
		}
	}

	ul.toogleLeftShow{
		margin:0 35px !important;
	}

	#toogleLeft{
		left:0;
	}

	#toogleRight{
		right:0;
	}

	#toogleLeft,#toogleRight{
		@include use-flex;
		@include flex-align-center;
		@include no-select;
		position: absolute;
		height:30px;
		overflow:hidden;
		background:#333;
		color:#fff;
		top:0;z-index:10;
		cursor: pointer;
		opacity:.9;
	}

}


#zhx-tabset-content-main{
	flex:1;
	-ms-flex:1;
	overflow: auto;
}

.zhx-tabset-contextmenu{
	position:fixed;
	font-size:12px;
	min-width:150px;
	z-index:99;
	border-radius:5px;
	border:1px solid #c3c3c3;
	box-shadow: 0 0 15px #c3c3c3;
	background-color:#fff;

	ul{
		margin:0;
		padding:0;

		li{
			padding:8px 20px;
			text-align: center;
			border-bottom:1px solid #e1e0e0;
			cursor:pointer;
		}
		li:hover{
			background-color:#f2f2f2;
		}
		li:last-child{
			border-bottom:none;
		}
	}

	.disabled{
		color:#cbcbcb;
		cursor:default !important;
	}
	.disabled:hover{
		background:none !important;
	}
}

#zhx-slide-settings{
	position:fixed;
	top:0;height:100%;
	background:#292421;
	z-index:10;
	box-shadow:5px 0 10px #000 inset;
	@include frame-transition(right);
}
#zhx-setting-menu{
	@include use-flex;
	@include flex-column;
	font-size:12px;
	color:#c1bbb7;

	ul{
		margin-top:10px;
		@include use-flex;
		@include flex-column;
		@include flex-align-center;

		li{
			padding:15px 0;
			color:#c1bbb7;
			@include use-flex;
			cursor:pointer;

			span{
				font-size:14px;
				@include use-flex;
				@include flex-align-center;
				margin-right:10px;
			}
		}

		li:hover{
			color:#fff;
		}
	}

	#userInfo{
		padding:10px;
		@include use-flex;
		@include flex-column;
		@include flex-align-center;
		border-bottom:1px solid #48433f;
	}

	#userAvatar{
		font-size:24px;
		padding:10px;
		border:1px solid #c1bbb7;
		border-radius:50px;
	}

	#userName{
		margin-top:10px;
		color:#fff;
	}

}